<template>
    <div style="height: 100%; width: 100%; position: relative">
        <div class="pagetop">
            <table class="table2style" style="width: 100%; font-size: 12px" border="0">
                <col style="width: 4%" />
                <col style="width: 9%" />
                <col style="width: 4%" />
                <col style="width: 9%" />
                <col style="width: 4%" />
                <col style="width: 7%" />
                <col style="width: 1%" />
                <col style="width: 7%" />
                <col style="width: 4%" />
                <col style="width: 16%" />
                <col style="width: 4%" />
                <col style="width: 10%" />
                <col style="width: 20%" />
                <tr>
                    <td style="text-align: right">仪器</td>
                    <td>
                        <rm-ddl-instrument width="160px" v-model="sel_instrId" defaultflag="1" prgno="LIS419" :clearable="false" @change="clearTableData"></rm-ddl-instrument>
                    </td>
                    <td style="text-align: right">报告单元</td>
                    <td>
                        <rm-ddl-rptunit prgno="LIS419" v-model="sel_rptunit" width="160px" clearable @change="clearTableData"></rm-ddl-rptunit>
                    </td>
                    <td style="text-align: right">标本日期</td>
                    <td>
                        <el-date-picker v-model="sel_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:  125px" :clearable="false" @change="clearTableData"> </el-date-picker>
                    </td>
                    <td align="center">至</td>
                    <td>
                        <el-date-picker v-model="sel_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 125px" :clearable="false" @change="clearTableData"> </el-date-picker>
                    </td>
                    <td style="text-align: right">样本号</td>
                    <td>
                        <el-input v-model="sel_sampleno" size="small" style="width: 270px" placeholder="输入如1,2,5-8等格式" v-on:input="clearTableData"></el-input>
                    </td>
                    <td><el-checkbox v-model="sel_update">仅显示修改的记录</el-checkbox></td>
                    <td colspan="2" align="right">
                        <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="QueryMainData">查询</el-button>

                        <el-button icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport">导出</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="white" movingcolor="#00ffff" :fixsize="460">
                <template v-slot:fix style="width: 200px" class="vxe-table">
                    <vxe-table ref="rxTable" :data.sync="detailTableData" :loading="rightLoading" class="table2style" border height="auto" size="mini" :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow>
                        <vxe-table-column align="center" type="index" width="22" title="No."></vxe-table-column>
                        <vxe-table-column field="rpt_itemname" title="报告项目" width="135"></vxe-table-column>
                        <vxe-table-column field="result_str" title="检验结果" width="66"></vxe-table-column>
                        <vxe-table-column field="orig_result_str" title="仪器结果" width="64"></vxe-table-column>
                        <vxe-table-column field="instrname" title="仪器" width="120"></vxe-table-column>
                        <vxe-table-column field="updateflag" title="已修改" style="width: 57" align="center">
                            <template v-slot="{ row }">
                                <el-checkbox v-model="row.updateflag" aria-readonly="" true-label="1" false-label="0" disabled></el-checkbox>
                            </template>
                        </vxe-table-column>
                    </vxe-table>
                </template>

                <vxe-table ref="lxTable" :data.sync="mainTableData" :loading="leftLoading" class="table2style" height="auto" border size="mini" :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow @current-change="CurrentChangeEvent">
                    <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
                    <vxe-table-column field="instrname" title="仪器名称" width="140"></vxe-table-column>
                    <vxe-table-column field="rptunitid" title="报告单元" width="140" :formatter="formatFun"></vxe-table-column>
                    <vxe-table-column field="sampledate" title="标本日期" width="80" align="center"></vxe-table-column>
                    <vxe-table-column field="sampleno" title="标本号" width="63"></vxe-table-column>
                    <vxe-table-column field="rpt_itemname" title="报告项目" width="145"></vxe-table-column>
                    <vxe-table-column field="instr_result_str" title="仪器结果" width="80" header-align="center" align="right"></vxe-table-column>
                    <vxe-table-column field="result_str" title="报告结果" width="80" header-align="center" align="right"></vxe-table-column>
                    <vxe-table-column field="result_dt" title="结果时间" width="128" align="center"></vxe-table-column>
                    <vxe-table-column field="recieve_dt" title="接收时间" width="128" align="center"></vxe-table-column>
                    <vxe-table-column field="testtype" title="测试类别" width="57" :formatter="formatFun" align="center"></vxe-table-column>
                    <vxe-table-column field="inlibflag" title="入库标志" width="57" :formatter="formatFun" align="center"></vxe-table-column>
                    <vxe-table-column field="interno" title="仪器项目通道号" width="98"></vxe-table-column>
                    <vxe-table-column field="result_num" title="数字结果" width="90" header-align="center" align="right"></vxe-table-column>
                    <vxe-table-column field="result_txt" title="大文本结果" width="107"></vxe-table-column>
                    <vxe-table-column field="result1" title="结果1" width="90"></vxe-table-column>
                    <vxe-table-column field="result2" title="结果2" width="90"></vxe-table-column>
                    <vxe-table-column field="result3" title="结果3" width="90"></vxe-table-column>
                    <!-- <vxe-table-column field="result_flag" title="结果状态标志" width="10%" :formatter="formatFun"></vxe-table-column> -->
                    <vxe-table-column field="qc_id" title="质控品ID" width="100"></vxe-table-column>
                    <vxe-table-column field="instrsampleno" title="仪器端原始标本号" width="108"></vxe-table-column>
                    <vxe-table-column field="itemcode_en" title="英文缩写" width="68"></vxe-table-column>
                </vxe-table>
            </rm-layout-right>
        </div>
    </div>
</template>

<script>
import rmLayoutRight from "../../../rmcompents/rm-layout-right.vue";
import XE from "xe-utils"; //引入工具类

export default {
    components: { rmLayoutRight },
    name: "LIS419",
    data() {
        return {
            sel_instrId: "",
            sel_rptunit: "",
            sel_startdt: XE.toDateString(new Date(), "yyyy-MM-01"),
            sel_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"),
            sel_sampleno: "",
            sel_update: false,
            mainTableData: [],
            detailTableData: [],
            leftLoading: false,
            rightLoading: false,
            rptunitOption: [],
            instrOption: [],
        };
    },
    created() {
        this.initOption();
    },
    methods: {
        QueryMainData() {
            this.mainTableData = [];
            this.detailTableData = [];
            if(!this.sel_instrId || this.sel_instrId <= 0){
                this.$alert("请先选择仪器！");
                return;
            }
            this.leftLoading = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS419",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "initMainData",
                        instrId: this.sel_instrId,
                        rptunit: this.sel_rptunit,
                        startdt: this.sel_startdt,
                        enddt: this.sel_enddt,
                        sampleno: this.sel_sampleno,
                        updateflag: this.sel_update ? "1" : "0",
                    },
                })
                .then((res) => {
                    if(res.flag == -1){
                        this.$alert(res.msg);
                    }
                    else{
                        if(res.data){
                            this.mainTableData = res.data;
                            if (res.data != null && res.data.length > 0) {
                                this.$refs.lxTable.setCurrentRow(res.data[0]);
                                this.queryRightData(res.data[0]);
                            } else {
                                this.$refs.lxTable.setCurrentRow(null);
                                this.detailTableData = [];
                            }
                        }
                    }
                    this.leftLoading = false;
                })
                .catch((e) => {
                    this.$alert(e, "error");
                    this.leftLoading = false;
                });
        },
        CurrentChangeEvent({ row, column }) {
            this.queryRightData(row);
        },
        queryRightData(row) {
            this.rightLoading = true;
            if (!!row) {
                this.$tool
                    .request({
                        url: "LIS/LIS4/LIS419",
                        method: "post",
                        timeout: 600000,
                        data: {
                            action: "queryRightData",
                            reportid: row.reportid,
                        },
                    })
                    .then((res) => {
                        if (res.data.length > 0) {
                            res.data.forEach((e) => {
                                if (e.result_str != null && e.orig_result_str && e.result_str != e.orig_result_str) {
                                    e.updateflag = true;
                                } else {
                                    e.updateflag = false;
                                }
                            });
                            this.detailTableData = res.data;

                            var collist = [
                                {
                                    type: "index",
                                    title: "NO.",
                                    width: 50,
                                },
                            ];
                            for (let i = 0, len = res.data.length; i < len; i++) {
                                const item = res.data[i];
                                let colitem = {
                                    field: item.field,
                                    title: item.title,
                                    width: item.width,
                                    formatter: this.formatdata,
                                };
                                collist.push(colitem);
                            }
                            this.tableColumn = collist;
                        } else {
                            this.detailTableData = [];
                        }
                        this.rightLoading = false;
                    })
                    .catch((e) => {
                        this.$alert(e, "error");
                        this.rightLoading = false;
                    });
            } else {
                this.detailTableData = [];
            }
        },
        formatFun({ cellValue, row, column }) {
            if (column.property == "testtype") {
                if (row.testtype == "1") {
                    return "普通";
                } else if (row.testtype == "2") {
                    return "加急";
                } else if (row.testtype == "3") {
                    return "质控";
                } else if (row.testtype == "4") {
                    return "标准";
                } else if (row.testtype == "M") {
                    return "交叉配血";
                } else {
                    return "";
                }
            } else if (column.property == "inlibflag") {
                if (row.inlibflag == "0") {
                    return "未入库";
                } else if (row.inlibflag == "1") {
                    return "入库";
                } else {
                    return "";
                }
            } else if (column.property == "rptunitid") {
                try {
                    let rptunitObj = this.rptunitOption.find((m) => m.data.trim() == cellValue);
                    if (rptunitObj != undefined && rptunitObj != null) {
                        return rptunitObj.display;
                    } else {
                        return cellValue;
                    }
                } catch {}
                // } else if (column.property == "instrid") {
                //     try {
                //         console.log(cellValue);
                //         let instrObj = this.instrOption.find((m) => m.data == cellValue);
                //         if (instrObj != undefined && instrObj != null) {
                //             return instrObj.display + "[" + cellValue + "]";
                //         } else {
                //             return cellValue;
                //         }
                //     } catch (error) {}
            }
        },
        initOption() {
            try {
                this.$tool
                    .request({
                        url: "LIS/LIS4/LIS419",
                        method: "post",
                        data: {
                            action: "initOption",
                        },
                    })
                    .then((res) => {
                        this.rptunitOption = res.rptunitOption;
                        this.instrOption = res.instrOption;
                    });
            } catch (error) {
                this.$message.warning(error);
            }
        },
        BtnExport() {
            let options = {
                filename: "LIS419 内部查询-仪器原始数据查询.csv",
            };
            this.$refs.lxTable.exportCsv(options);
        },
        clearTableData() {
            this.mainTableData = [];
            this, (this.detailTableData = []);
        },
    },
};
</script>

<style scoped>
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
::v-deep .vxe-table.t--border .vxe-header--column {
    border-bottom: 1px solid #cccccc;
}

.table2style tr td {
    white-space: nowrap;
}
.pagetop {
    width: 100%;
    /* height: 36px; */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    z-index: 99;
    border: 1px solid #ccc;
    text-align: left;
}
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border: 4px solid white;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 5px;
    width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    margin-right: 2px;
    border-width: 2px 0px 2px 0;
    border-color: #f1f1f1 #505050 #f1f1f1 #f1f1f1;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: #d2d2d2 #505050 #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    margin-left: 2px;
    border-width: 2px 0 2px 4px;
    border-color: #f1f1f1 #f1f1f1 #f1f1f1 #505050;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: #d2d2d2 #d2d2d2 #d2d2d2 #505050;
}

.cut {
    width: 20px;
    background-color: #fff;
    background-image: none;
    border-radius: 0px;
    border: 1px solid #dcdfe6;
    height: 28px;
    line-height: 27px;
}
.search-param {
    display: flex;
}
.search-title {
    width: 50px;
    text-align: right;
}

.pagecenter {
    position: absolute;
    top: 45px;
    width: 100%;
    left: 0;
    bottom: 5px;
}
.search-param_text {
    margin-left: 5px;
}
.search-param .el-input {
    width: 120px;
}
.search-param .el-input--small .el-input__inner {
    height: 26px !important;
    line-height: 26px !important;
}
.search-btn {
    float: right;
    /*margin: 5px 5px 0 0;*/
    margin-left: 95px;
    text-align: right;
}
.page-bottom {
    margin-top: 108px;
    position: absolute;
    font-size: 12px;
    width: 100%;
    height: calc(100% - 108px);
}
</style>